<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>表单元素和vue的交互</title>
	</head>
	<body>
		<div id="app">
			<form action="" method="post">
				<div id="">
					<span id="">
						用户名：
					</span>
					<input type="text" v-model="username" name="" id="" value="" />
				</div>
				<div class="mui-input-row mui-radio ">
					<span id="">
						性别：
					</span>
					
					<input name="sex"  v-model="sex" type="radio" id="man" value="男">
					<label for="man">男</label>
					<input name="sex" v-model="sex" type="radio"  id="woman" value="女">
					<label for="woman">女</label>
				</div>
				<div id="">
					<span id="">
						爱好：
					</span>
					<input type="checkbox" name="" id="lan" v-model="hobby" value="打篮球" /><label for="lan">打篮球</label>
					<input type="checkbox" name="" id="bin" v-model="hobby" value="吃冰冰" /><label for="bin">吃冰冰</label>
					<input type="checkbox" name="" id="gou" v-model="hobby" value="吃够够" /><label for="gou">吃够够</label>				</div>
					
				
				<div class="">
					<select name="dept" multiple="multiple" v-model="dept">
						<option value="研发">研发</option>
						<option value="财务">财务</option>
					</select>
				</div>
				<button type="button"@click.prevent="submit" > 提交</button>
				<input type="submit" @click.prevent="submit" value="提交input" />
			</form>
		</div>
	</body>
</html>
<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
	new Vue({
		el:"#app",
		data:{
			username:"",
			hobby:["打篮球"],
			sex:"",
			dept:["研发"]
		},
		methods:{
			submit(){
				console.log("username数据sex"+this.sex+"hobby"+this.hobby+"dept"+this.dept)
			}
		}
	});
</script>
